iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

前端幼鳥三十天養成記系列 第 2

DAY2 FLOAT佈局 - 搞懂他愛出軌的心

  • 分享至 

  • xImage
  •  

佈局的方法很多,float是比較難懂的一個。float的經典有文繞圖、三欄佈局中的聖杯佈局和雙飛翼佈局。

為甚麼說他愛出軌呢?

當元素有屬性float時,他會離開文檔流(normal flow),拋家棄子,只想貼在前一個元素屁股後面。
色就算了,還害他拔拔的房子坍塌(父元素塌陷),罪加一條:不孝。 有好好普渡float吧?不怕他半夜找我?

但是呀~再渣也有理由,帶各位小小鳥讀懂他的渣心術之前,我們先偷瞄一下,要用到的盒模型、block/inline屬性。


盒模型寬度計算

盒模型寬度
小提醒:所有的寬度,都是「推」出空間。
如果想讓元素往左移50px,寫margin-left/padding-left/left:50px都會造成反效果。
因為從左邊推出50px的空間,block呈現往右移50px。

/*正確的做法*/
margin-left:-50px;

去w3schools練練手.CSS Box Model

區塊(block)、行內(inline)

簡單講:區塊元素佔一整行。行內元素只佔設定寬度,緊接著元素往下排。
去w3schools練練手.CSS Layout - inline-block      

備齊工具,正式進入主題,來聊聊float他對大家造成的影響吧~~


對別人的影響 - 遮住部分後方元素

聽稚鳥說,float會遮住別人,但文繞圖是繞,又不是叫圖遮文?稚鳥是不是亂講話啊,把你變烤小鳥喔!
先別 先別給我點機會,晚點再吃也不遲嘛

我們來大致看這張gif圖,消失的是小粉,被部分遮住的是深綠。

  • 小粉:元素屬性有float,margin以外的部分;
  • 深綠:float元素的後方元素,margin以外的部分。
    我們可以先下一個小結論:margin以外的部分才有可能被遮住。

float原理示意圖.gif
現在,就是現在,不要恍神,眼睛不要眨,跟著稚鳥進到前端的世界裡(硬要學我以前老師)。
一起細節拆解這張圖的每一個步驟吧~~

紅色系和綠色系皆為div元素,對紅色系設定float:

  1. 包含margin在內的「正紅」(margin, border, padding, content)浮起,脫離文檔流(normal flow)。
  2. 後面的元素視「粉紅色」(margin外)於無物
  3. 包含margin在內的「淡綠色」,往前滑,抵到「正紅」
  4. margin外的深綠色,流入前一行。部分流入「正紅」底下。

解答:文繞圖為蝦米不會變成圖遮文

float究竟會不會遮住別人呢?會遮也不會遮。只遮margin以外,這是結論。

文繞圖的圖就是浮起來的「正紅」,文是「淡綠」。中的文字,屬於content,包含在margin內,因此文字會貼在圖片後方。環繞住圖片,不會鑽入圖片下方被遮住。

老家房子塌了 - 父元素塌陷

我速速,我知道你耐心快沒了。

簡單點,父元素抓不到飄起來子元素。因此沒多做其他設定,父元素就變成0px。至於要做甚麼設定,下一篇,用到我們再說啦啦。
看到這基本上你已經參透渣渣float的心,剛剛上面的舉例是只有「正紅」設定float:left,那當兩個都float呢?


對自己的影響 - 長得像inline-block

你做惹嗎?是不是效果會只剩「正紅」和「淡綠」,粉紅和深綠都會不見。
並排坐的樣子像極了愛情inline element,但當他有屬性float的那一刻,他的血液就瞬間有了margin,border,padding...的屬性(本來就是block的維持不變),所以說呀,我覺得它更像混血兒inline-block element。

至於後面明明就沒有其他元素了,為甚麼深綠會不見。我給的解釋是,不管後面有沒有其他元素,當某元素擁有float屬性,它margin外的區域就消失了,魚與熊掌不可兼得,要兼得要加錢的阿 人客~
可以想成與父元素塌陷差不多的道理。飄起來,margin外的粉絲抓不到他,就散場回家洗洗睡了,只是拔拔已經沒有家可以睡了


延伸閱讀

這兒有一篇比較float 和inline-block優缺和原理的文章,覺得很讚,有興趣可以接著看
CSS中关于float和display: inline-block布局的区别详解_qq1084235321的博客-CSDN博客


第二天就先這樣囉~~各幼鳥晚安
時間:8/31 10:18PM(再版時間)
音樂:這個人 廖俊濤 (有聽過嗎 各位幼鳥?上一篇也是推這首呀)
https://www.youtube.com/watch?v=ix9a7mtEUl0&t=1426s 7:34
飲料:仙草
地點:我房間窗邊旁邊
狀態:直接關起窗戶,邊肚子痛邊重新捋邏輯,邊唱個兩句~~
做立體醜醜圖那天,差不多是3:00~5:00AM。一直手殘重錄,好荒謬


資料來源


上一篇
DAY1 築個前端毛胚屋
下一篇
DAY3 聖杯布局 - 三個欄的C位爭奪戰(上)
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言